import React from 'react';

import {
  View,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
} from 'react-native';

import {Button} from 'react-native-elements';
import dismissKeyboard from 'dismissKeyboard';

import Config from '../../config';
import BasePage from '../common/BasePage';
import Constants from '../../common/Constants';
import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import CommonStyles from '../../common/CommonStyles';
import ResponseConstants from '../../common/ResponseConstants';

import UserForgetPwdAction from '../../actions/user/UserForgetPwdAction';
import RequestSmsAction from '../../actions/login/RequestSmsAction';

export default class UserForgetPwdPage extends BasePage {
  constructor(props) {
    super(props);

    this.state.smsIntervalTick = 0;
    this.state.viewStatus = 1;
    this.state.tel = "";
    this.state.password = "";
    this.state.smsNum = "";
    this.state.statusText = "";
    this.state.authorization = "0";
    this.state.smsIntervalTick = -1;
    this.state.updateSucess = false;
  }

  shouldComponentUpdate(nextProps, nextState) {
    if(nextState.updateSucess === true) {
      nextState.updateSucess = false;
      ToastUtils.show("修改成功");
      nextState.password = "";
      nextState.smsNum = "";
      nextState.viewStatus = 1;
      this.goBack();
    }
    if (this.state.viewStatus != nextState.viewStatus) {
      if(nextState.viewStatus == ResponseConstants.status_sms_success) {
        this.smsInterval = setInterval(this._updateInterval.bind(this), 1000);
        this._updateInterval();
      }
    }
    return true;
  }

  _dealLeavePage() {
    this._clearInterval();
  }

  _updateInterval() {
    var tick = this.state.smsIntervalTick == -1 ? 60 : this.state.smsIntervalTick - 1;
    if(tick == 0) {
      this._clearInterval();
      tick = -1;
    }
    this.setState({
      smsIntervalTick: tick,
    });
  }

  _clearInterval() {
    if(this.smsInterval) {
      clearInterval(this.smsInterval);
      this.smsInterval = null;
      this.setState({
        smsIntervalTick:-1,
      })
    }
  }

  render() {
    return(
      <TouchableOpacity style={{flex:1, paddingTop:Config.paddingTop,
          backgroundColor:"#ffffffff",
          paddingLeft:SizeUtils.translateDesignWidthToCode(54),
          paddingRight:SizeUtils.translateDesignWidthToCode(54),
         flexDirection:"column", alignItems:"center"}} onPress={() => dismissKeyboard()}>
         {this._renderNewPasswordText()}
         {this._renderTelTxt()}
         {this._renderSmsText()}
         {this._renderSubmitButton()}
         {this._renderNavigationBar()}
      </TouchableOpacity>
    )
  }

  _renderTelTxt(){
    return (
      <View style={{
            height:SizeUtils.translateDesignHeightToCode(86),
            borderBottomWidth:SizeUtils.translateFontSizeToCode(3),
            borderColor:"#eeeeee",
            marginTop:SizeUtils.translateDesignHeightToCode(72),
          }}>
        <TextInput
          style={{

            width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(54 * 2),
            height:SizeUtils.translateDesignHeightToCode(54),
            borderWidth: 0,
            textAlignVertical: "top",
            padding:0,
            fontSize:SizeUtils.translateFontSizeToCode(32),}}
          onChangeText = {(tel) => this.setState({tel})}
          placeholder = "手机号"
          underlineColorAndroid="transparent"
          multiline = {false}
          maxLength={16}
          value = {this.state.tel}
        />
      </View>
    )
  }

  _renderNewPasswordText() {
    return (
      <View style={{
            height:SizeUtils.translateDesignHeightToCode(86),
            borderBottomWidth:SizeUtils.translateFontSizeToCode(3),
            borderColor:"#eeeeee",
            marginTop:SizeUtils.translateDesignHeightToCode(72),
          }}>
        <TextInput
          style={{

            width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(54 * 2),
            height:SizeUtils.translateDesignHeightToCode(54),
            borderWidth: 0,
            textAlignVertical: "top",
            padding:0,
            fontSize:SizeUtils.translateFontSizeToCode(32),}}
          onChangeText = {(password) => this.setState({password})}
          placeholder = "新密码(6-16位)"
          underlineColorAndroid="transparent"
          multiline = {false}
          secureTextEntry={true}
          maxLength={16}
          value = {this.state.password}
        />
      </View>
    )
  }

  _renderSmsText() {
    return (
      <View style={{flexDirection:"row", alignItems:"center",
            height:SizeUtils.translateDesignHeightToCode(86),
            borderBottomWidth:SizeUtils.translateFontSizeToCode(3),
            borderColor:"#eeeeee",
            marginTop:SizeUtils.translateDesignHeightToCode(60),
          }}>
        <TextInput
          style={{
            padding:0,
            width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(54 * 2 + 250),
            height:SizeUtils.translateDesignHeightToCode(54),
            borderWidth: 0,
            fontSize:SizeUtils.translateFontSizeToCode(32),}}
          onChangeText = {(smsNum) => this.setState({smsNum})}
          placeholder = "验证码"
          multiline = {false}
          underlineColorAndroid="transparent"
          maxLength={6}
          keyboardType="numeric"
          keyboardAppearance="dark"
          value = {this.state.smsNum}
        />
        <TouchableOpacity onPress = {() => this._onRequestSms()} style={{width:SizeUtils.translateDesignWidthToCode(250),
            height:SizeUtils.translateDesignHeightToCode(54)}}
          disabled = {this.state.smsIntervalTick > 0}>
          <Text style={[CommonStyles.primaryText, {fontSize:SizeUtils.translateFontSizeToCode(32),
              // paddingTop:SizeUtils.translateDesignHeightToCode(12),
              color:"#000000"}]}>
            {this._getSmsBtnText()}
          </Text>
        </TouchableOpacity>
      </View>
    )
  }

  _getSmsBtnText()  {
    var text = "获取验证码";
    if(this.state.smsIntervalTick > 0) {
      text = text + "(" + this.state.smsIntervalTick + ")";
    }
    return text;
  }

  _onRequestSms() {
    if(this.state.tel.length != 11)
    {
      ToastUtils.show("请输入正确的手机号");
      return;
    }
    new RequestSmsAction().call(this, {phoneNum:this.state.tel, type: 5});
  }

  _renderSubmitButton() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(54 * 2),
          flexDirection:"column", alignItems:"center",
          marginTop:SizeUtils.translateDesignHeightToCode(504)}}>
        <Button
          backgroundColor="#db3132"
          disabled = {this._checkBtnDisable()}
          buttonStyle = {{width: SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(54 * 2),
            height:SizeUtils.translateDesignHeightToCode(80), borderRadius:30}}
          textStyle={{fontSize: SizeUtils.translateFontSizeToCode(30)}}
          title = "确认修改"
          onPress = {() => this._onPressLoginBtn()}
        />
        <Text style={{color:"#999999", fontSize: SizeUtils.translateFontSizeToCode(24),
          paddingTop: SizeUtils.translateDesignHeightToCode(20)}}>{this._renderSystemNotice()}</Text>
      </View>
    )
  }

  _checkBtnDisable() {
    return this.state.tel == "" || this.state.password == "" || this.state.smsNum == "" || this.state.viewStatus == 2 || this.state.viewStatus == 4;
  }

  _renderSystemNotice() {
    let statusText = "";
    let showCode = true;
    if(this.state.viewStatus == 1) {
      return "";
    }
    else if(this.state.viewStatus == 2) {
      statusText = "获取验证码中";
      showCode = false;
    }
    else if(this.state.viewStatus == ResponseConstants.status_sms_success) {
      statusText = "验证码已获取";
      showCode = false;
    }
    else if(this.state.viewStatus == 4) {
      statusText = "请求已发送";
      showCode = false;
    }
    else if(this.state.viewStatus == -901) {
      statusText = "密码格式不正确(6-16位)";
      showCode = false;
    }
    else if(this.state.viewStatus == ResponseConstants.status_password_length_error) {
      statusText = ResponseConstants.status_password_length_error_text;
      showCode = false;
    }
    else {
      statusText = this.state.statusText;
    }
    if(showCode) {
      statusText = statusText + " code:" + this.state.viewStatus;
    }
    return statusText;
  }

  _onPressLoginBtn() {
    dismissKeyboard();
    if(!this.state.password || this.state.password.length < 6) {
      this.setState({
        viewStatus:ResponseConstants.status_password_length_error,
      })
      return;
    }
    new UserForgetPwdAction().call(this, {id:this.state.tel,  password: this.state.password, smsNum: this.state.smsNum})
  }
}
